import React, { Component } from 'react';
import { Modal, Toast } from 'antd-mobile'
import { CheckOutline } from 'antd-mobile-icons'
// 引入css
import '../../styles/mine/Header.css'
import { withRouter } from 'react-router-dom'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: false
        }
    }
    // 修改flag状态
    componentDidMount() {
        let token = localStorage.getItem("token")
        if (token) {
            this.setState({ flag: true })
        }

    }

    // 去到登录页
    tologin() {
        this.props.history.push({ pathname: '/login' })
    }

    // 退出登录
    backlogin() {
        Modal.confirm({
            content: '是否退出登录',
            onConfirm: () => {
                Toast.show({
                    icon: <CheckOutline />,
                    content: '退出登录成功',
                    position: 'bottom',
                })
                localStorage.removeItem("token")
                this.props.history.go(0)
            },
        })
    }

    render() {
        return (
            <div className='header'>
                <div style={{ display: this.state.flag ? 'none' : 'block' }} className='portrait' onClick={() => { this.tologin() }}>未登录</div>
                <div style={{ display: this.state.flag ? 'block' : 'none' }} className='portrait' onClick={() => { this.backlogin() }}>
                    <img src="https://img.zcool.cn/community/01dc1b58ae3d6ca801219c77314f09.png@1280w_1l_2o_100sh.png" alt="" />
                </div>
                <div className='name' style={{ display: this.state.flag ? 'block' : 'none' }}>码云之路</div>
            </div>
        );
    }
}

export default withRouter(Header);